<template>
  <div class="bg_write" style="position:relative">
    <el-row>
      <el-col :span="24" class="content_title">
        <el-col :span="12">
          <HeadTitle></HeadTitle>
        </el-col>
        <el-col :span="12"></el-col>
      </el-col>
    </el-row>
    <el-row class="content-right-box on">
      <el-col :span="24" class="content-right on">
        <div class="diy clearfix on">
          <div class="content-right on">
            <div class="diy clearfix on">
              <div id="diy-phone" class="no-border">
                <div class="diy-phone-header">
                  <div class="diy-phone-title j-pagetitle meb_set_index">
                    {{title}}
                    <div @click="showSeting('head')" :class="{index_set_active:showTitle=='head'}" class="index_border"></div>
                  </div>
                  <div class="index_diy-ctrl index_head" :style="{display:showTitle=='head'? 'block':''}">
                    <div class="diy-ctrl-item diy-ctrl-items on">
                      <el-form>
                        <el-form-item label="网站标题" :label-width="formLabelWidth">
                          <el-col :span="12">
                            <el-input v-model="title" autocomplete="off"></el-input>
                          </el-col>
                        </el-form-item>
                        <el-form-item label="网站LOGO" :label-width="formLabelWidth">
                          <el-col :span="12">
                            <div class="index_img_nav img_nav">
                              <img :src="headList.length >0 ? $fnc.getImgUrl(headList[0].piclink) : ''" class="nav_view_pic" alt>
                              <span class="imgnav-reselect">
                                <el-upload action="/api/common/upload/index/" multiple :on-success="uploadSuccess" :show-file-list="false">重新选择
                                </el-upload>
                              </span>
                            </div>
                          </el-col>
                        </el-form-item>
                      </el-form>
                    </div>
                  </div>
                </div>
                <div class="diy-phone-contain">
                  <div class="nodrag">
                    <div class="diy-conitem">
                      <img src="../../assets/img/config/pnone_head.png" alt>
                      <div class="index_con">
                        <div class="index_content">
                          <div class="banner_content">
                            <div>
                              <el-carousel :interval="4000" indicator-position="none" arrow="never" height="145px">
                                <el-carousel-item v-for="(item,index) in bannerList" :key="index">
                                  <img :src="$fnc.getImgUrl(item.piclink)" alt>
                                </el-carousel-item>
                              </el-carousel>
                            </div>
                            <div class="banner_jiaodian">
                              <span v-for="(item,index) in bannerList" :key="index"></span>
                            </div>
                          </div>
                          <div @click="showSeting('banner')" :class="{index_set_active:showTitle=='banner'}" class="index_border"></div>
                          <div class="index_diy-ctrl index_banner" :style="{display:showTitle=='banner'? 'block':''}">
                            <div class="diy-ctrl-item diy-ctrl-itemss diy-ctrl-items on">
                              <el-form>
                                <el-form-item label="栏目是否显示" :label-width="formLabelWidth">
                                  <el-col :span="12">
                                    <el-switch v-model="bannerListShow" class="demo" active-text="on" active-value="1" inactive-text="off"
                                        inactive-value="0" />
                                  </el-col>
                                  <el-col :span="12" class="tr pd_right_15 sizeColor_red">PS:拖拽每个栏目可以进行排序</el-col>
                                </el-form-item>
                                <upcard className="banner" @sendDel="getSendDel" :data="bannerList" :cart="list_card"></upcard>
                              </el-form>
                            </div>
                          </div>
                        </div>
                        <div class="index_menu">
                          <ul>
                            <li v-for="(item,i) in menuList" :key="i">
                              <a>
                                <img :src="$fnc.getImgUrl(item.piclink)" alt>
                                <p>{{item.title}}</p>
                              </a>
                            </li>
                          </ul>
                          <div class="index_border" @click="showSeting('set_menu')" :class="{index_set_active:showTitle=='set_menu'}"></div>
                          <div class="index_diy-ctrl index_menu_form" :style="{display:showTitle=='set_menu'? 'block':''}">
                            <div class="diy-ctrl-item diy-ctrl-itemss diy-ctrl-items on">
                              <el-form>
                                <el-form-item label="栏目是否显示" :label-width="formLabelWidth">
                                  <el-col :span="12">
                                    <el-switch v-model="menuListShow" class="demo" active-text="on" active-value="1" inactive-text="off"
                                        inactive-value="0" />
                                  </el-col>
                                  <el-col :span="12" class="tr pd_right_15 sizeColor_red">PS:拖拽每个栏目可以进行排序</el-col>
                                </el-form-item>
                                <div>
                                  <upcard class="menu" className="menu" @sendDel="getSendDel" :data="menuList" :cart="list_menu"></upcard>
                                </div>
                              </el-form>
                            </div>
                          </div>
                        </div>
                        <div class="index_brand">
                          <ul>
                            <li v-for="(item,index) in brandList" :key="index">
                              <a>
                                <img :src="$fnc.getImgUrl(item.piclink)" alt>
                              </a>
                            </li>
                          </ul>
                          <div class="index_border" @click="showSeting('brand')" :class="{index_set_active:showTitle=='brand'}"></div>
                          <div class="index_diy-ctrl index_brand_add" :style="{display:showTitle=='brand'? 'block':''}">
                            <div class="diy-ctrl-item diy-ctrl-itemss diy-ctrl-items on">
                              <el-form>
                                <el-form-item label="栏目是否显示" :label-width="formLabelWidth">
                                  <el-col :span="12">
                                    <el-switch v-model="brandListShow" class="demo" active-text="on" active-value="1" inactive-text="off"
                                        inactive-value="0" />
                                  </el-col>
                                  <el-col :span="12" class="tr pd_right_15 sizeColor_red">PS:拖拽每个栏目可以进行排序</el-col>
                                </el-form-item>
                                <div>
                                  <upcard className="brand" @sendDel="getSendDel" :data="brandList" :cart="list_card"></upcard>
                                </div>
                              </el-form>
                            </div>
                          </div>
                        </div>
                        <div class="index_day">
                          <img src="../../assets/img/config/day_title.png" alt>
                          <div class="index_day_title">
                            限时抢购 每日 17：07：00更新
                            <span>查看更多爆品&gt;</span>
                          </div>
                          <el-row class="day_bg">
                            <el-col :span="8" v-for="(item,i) in day_list" :key="i">
                              <el-card :body-style="{padding:'5px'}" class="day_card" shadow="never">
                                <img :src="$fnc.getImgUrl(item.piclink)" class="image">
                                <div class="day_shop">
                                  <div>
                                    惊喜价
                                    <span>￥{{item.price}}</span>
                                  </div>
                                  <div>
                                    日常价
                                    <span>￥489</span>
                                  </div>
                                </div>
                              </el-card>
                            </el-col>
                          </el-row>
                          <div class="index_border" @click="showSeting('day')" :class="{index_set_active:showTitle=='day'}"></div>
                          <div class="index_diy-ctrl index_day_bg" :style="{display:showTitle=='day'? 'block':''}">
                            <div class="diy-ctrl-item diy-ctrl-itemss diy-ctrl-items on">
                              <el-form>
                                <el-form-item label="栏目是否显示" :label-width="formLabelWidth">
                                  <el-col :span="12">
                                    <el-switch v-model="day_listShow" class="demo" active-text="on" active-value="1" inactive-text="off"
                                        inactive-value="0" />
                                  </el-col>
                                  <el-col :span="12" class="tr pd_right_15 sizeColor_red">PS:拖拽每个栏目可以进行排序</el-col>
                                </el-form-item>
                                <div>
                                  <div class="bg_con">
                                    <upcard className="day" @sendDel="getSendDel" :data="day_list" :cart="listItem"></upcard>
                                  </div>
                                </div>
                              </el-form>
                            </div>
                          </div>
                        </div>
                        <div class="index_find">
                          <h3>发现品牌</h3>
                          <div class="index_first"></div>
                          <div class="index_last">
                            <ul>
                              <li v-for="(item,index) in findList" :key="index">
                                <a>
                                  <img :src="$fnc.getImgUrl(item.piclink)" alt>
                                </a>
                              </li>
                            </ul>
                          </div>
                          <div class="index_border" @click="showSeting('find')" :class="{index_set_active:showTitle=='find'}"></div>
                          <div class="index_diy-ctrl index_find_add" :style="{display:showTitle=='find'? 'block':''}">
                            <div class="diy-ctrl-item diy-ctrl-itemss diy-ctrl-items on">
                              <el-form>
                                <el-form-item label="栏目是否显示" :label-width="formLabelWidth">
                                  <el-col :span="12">
                                    <el-switch v-model="findListShow" class="demo" active-text="on" active-value="1" inactive-text="off"
                                        inactive-value="0" />
                                  </el-col>
                                  <el-col :span="12" class="tr pd_right_15 sizeColor_red">PS:拖拽每个栏目可以进行排序</el-col>
                                </el-form-item>
                                <upcard className="find" @sendDel="getSendDel" :data="findList" :cart="list_card"></upcard>
                              </el-form>
                            </div>
                          </div>
                        </div>
                        <div class="index_list">
                          <h3>推荐榜单</h3>
                          <div class="index_list_img">
                            <ul>
                              <li v-for="(item,index) in list" :key="index">
                                <a>
                                  <img :src="$fnc.getImgUrl(item.piclink)">
                                </a>
                              </li>
                            </ul>
                          </div>
                          <div class="index_border" @click="showSeting('list')" :class="{index_set_active:showTitle=='list'}"></div>
                          <div class="index_diy-ctrl index_list_add" :style="{display:showTitle=='list'? 'block':''}">
                            <div class="diy-ctrl-item diy-ctrl-itemss diy-ctrl-items on">
                              <el-form>
                                <el-form-item label="栏目是否显示" :label-width="formLabelWidth">
                                  <el-col :span="12">
                                    <el-switch v-model="listShow" class="demo" active-text="on" active-value="1" inactive-text="off"
                                        inactive-value="0" />
                                  </el-col>
                                  <el-col :span="12" class="tr pd_right_15 sizeColor_red">PS:拖拽每个栏目可以进行排序</el-col>
                                </el-form-item>
                                <upcard className="li_st" @sendDel="getSendDel" :data="list" :cart="list_card"></upcard>
                              </el-form>
                            </div>
                          </div>
                        </div>
                        <div class="index_list">
                          <div v-for="(item,i) in adv" :key="i">
                            <img :src="$fnc.getImgUrl(item.piclink)" style="    width:100%;max-width:none;max-height:none;" alt>
                          </div>

                          <div class="index_border" @click="showSeting('adv')" :class="{index_set_active:showTitle=='adv'}"></div>
                          <div class="index_diy-ctrl adv" :style="{display:showTitle=='adv'? 'block':''}">
                            <div class="diy-ctrl-item diy-ctrl-itemss diy-ctrl-items on">
                              <el-form>
                                <el-form-item label="栏目是否显示" :label-width="formLabelWidth">
                                  <el-col :span="12">
                                    <el-switch v-model="advShow" class="demo" active-text="on" active-value="1" inactive-text="off"
                                        inactive-value="0" />
                                  </el-col>
                                  <el-col :span="12" class="tr pd_right_15 sizeColor_red">PS:拖拽每个栏目可以进行排序</el-col>
                                </el-form-item>
                                <upcard className="basnner_adv" @sendDel="getSendDel" :data="adv" :cart="list_card"></upcard>
                              </el-form>
                            </div>
                          </div>
                        </div>
                        <div class="index_shop_list">

                          <ul>
                            <li v-for="(item,index) in shopList" :key="index">
                              <div class>
                                <img :src="$fnc.getImgUrl(item.piclink)" alt>
                              </div>
                              <div class>
                                <h3>{{item.title}}</h3>
                                <div class="shop_Label">
                                  <span>￥{{item.price}}</span>
                                  <span>看相似</span>
                                </div>
                              </div>
                            </li>
                          </ul>
                          <div class="index_border" @click="showSeting('shop_list')" :class="{index_set_active:showTitle=='shop_list'}"></div>
                          <div class="index_diy-ctrl index_shop_list_add" :style="{display:showTitle=='shop_list'? 'block':''}">
                            <div class="diy-ctrl-item diy-ctrl-itemss diy-ctrl-items on">
                              <el-form>
                                <el-form-item label="栏目是否显示" :label-width="formLabelWidth">
                                  <el-col :span="12">
                                    <el-switch v-model="shopListShow" class="demo" active-text="on" active-value="1" inactive-text="off"
                                        inactive-value="0" />
                                  </el-col>
                                  <el-col :span="12" class="tr pd_right_15 sizeColor_red">PS:拖拽每个栏目可以进行排序</el-col>
                                </el-form-item>
                                <upcard className="shop_li_st" @sendDel="getSendDel" :data="shopList" :cart="listItem"></upcard>
                              </el-form>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-col :span="22" class="men_add">
      <el-card shadow="always">
        <el-button :loading='$store.state.isLoading' @click="homeAdd" @keydown.13="homeAdd">保存</el-button>
      </el-card>
    </el-col>
  </div>
</template>
<script>
import HeadTitle from "@/components/currency/HeadTitle.vue";
import myUpload from "@/components/currency/MyUpload.vue";
import upcard from "@/components/currency/IndexSet_upload.vue";
export default {
  components: {
    HeadTitle,
    myUpload,
    upcard
  },
  data () {
    return {
      showAlert: true,
      showTitle: "head",
      formLabelWidth: "120px",
      dialogTableVisible: false,
      list_card: "list_card",
      listItem: "list",
      list_menu: "list_menu",
      loading: false,

      // bgImgUrl:require('../../assets/img/meb/bg1.jpg'),
      headList: [
        {
          piclink: "",
          id: "0",
          title: "头部图片",
          links: ""
        }
      ],

      value6: "1",
      title: "商城主页",
      bannerList: [],
      bannerListShow: "1",
      menuList: [
        {
          piclink: require("../../assets/img/config/icon01.png"),
          title: "休闲食品",
          links: "",
          disable: true
        }
      ],
      menuListShow: "1",
      brandList: [
        {
          piclink: require("../../assets/img/config/bround_icon1.jpg"),
          links: "1",
          title: "1",
          disable: true
        },
        {
          piclink: require("../../assets/img/config/brand_icon2.jpg"),
          links: "2",
          title: "2",
          disable: true
        }
      ],
      brandListShow: "1",
      day_list: [],
      day_listShow: "1",
      findList: [
        {
          piclink: require("../../assets/img/config/20180807110426852685.jpg"),
          links: "",
          title: "",
          disable: true
        }
      ],
      findListShow: "1",
      list: [
        {
          piclink: require("../../assets/img/config/list_1.png"),
          title: "1",
          links: "1",
          disable: true
        },
        {
          piclink: require("../../assets/img/config/list_2.png"),
          title: "1",
          links: "1",
          disable: true
        },
        {
          piclink: require("../../assets/img/config/list_1.png"),
          title: "1",
          links: "1",
          disable: true
        },
        {
          piclink: require("../../assets/img/config/20180807110511901190.jpg"),
          title: "1",
          links: "1",
          disable: true
        },
        {
          piclink: require("../../assets/img/config/20180807110674877487.jpg"),
          title: "1",
          links: "1",
          disable: true
        },
        {
          piclink: require("../../assets/img/config/20180807110674877487.jpg"),
          title: "1",
          links: "1",
          disable: true
        },
        {
          piclink: require("../../assets/img/config/20180807110674877487.jpg"),
          title: "1",
          links: "1",
          disable: true
        }
      ],
      listShow: "1",
      shopList: [],
      shopListShow: "1",
      prevList: [],
      top_del: {
        del_top_banner: [],
        del_top_menu: [],
        del_top_brand: [],
        del_top_day: [],
        del_top_find: [],
        del_top_list: [],
        del_top_shopList: [],
        del_top_adv: []
      },
      advShow: "1",
      adv: []
    };
  },
  methods: {
    showSeting (str) {
      this.showTitle = str;
    },
    getSendDel (obj) {
      console.log(obj)
      if (obj.id == 0 || obj.id == undefined) return;
      switch (obj.title) {
        case "banner":
          this.top_del.del_top_banner.push(obj.id);
          break;
        case "menu":
          this.top_del.del_top_menu.push(obj.id);
          break;
        case "brand":
          this.top_del.del_top_brand.push(obj.id);
          break;
        case "day":
          this.top_del.del_top_day.push(obj.id);
          break;
        case "find":
          this.top_del.del_top_find.push(obj.id);
          break;
        case "find":
          this.top_del.del_top_find.push(obj.id);
          break;
        case "li_st":
          this.top_del.del_top_list.push(obj.id);
          break;
        case "shop_li_st":
          this.top_del.del_top_shopList.push(obj.id);
        case "basnner_adv":
          this.top_del.del_top_adv.push(obj.id);
          break;
      }
    },
    uploadSuccess (response, file, fileList, index) {
      if (response.code == 200 && response.code_desc == "请求成功") {
        this.headList[0].piclink = response.result;
      } else if (response.code == 400) {
        this.$message.error("上传失败！不支持的类型");
      }
    },
    homeAdd () {
      var day_filter_id = [];
      var shopList_filter_id = [];
      var params = {};

      var top_head = {};
      top_head.title = this.title;
      top_head.cate = "head";
      top_head.data = this.headList;
      params.top_head = JSON.stringify(top_head);

      var top_banner = {};
      top_banner.cate = "banner";
      top_banner.show = this.bannerListShow;
      top_banner.title = "首页轮播图";
      top_banner.data = this.bannerList;
      params.top_banner = JSON.stringify(top_banner);

      var top_menu = {};
      top_menu.cate = "menu";
      top_menu.show = this.menuListShow;
      top_menu.title = "首页菜单";
      top_menu.data = this.menuList;
      params.top_menu = JSON.stringify(top_menu);

      var top_adv = {};
      top_adv.cate = "adv";
      top_adv.show = this.advShow;
      top_adv.title = "广告位";
      top_adv.data = this.adv;
      params.top_adv = JSON.stringify(top_adv);

      var top_brand = {};
      top_brand.cate = "brand";
      top_brand.show = this.brandListShow;
      top_brand.title = "品牌精选";
      top_brand.data = this.brandList;
      params.top_brand = JSON.stringify(top_brand);

      var top_day = {};
      top_day.cate = "day";
      top_day.show = this.day_listShow;
      top_day.title = "天天惊喜";
      this.day_list.filter(item => {
        return day_filter_id.push(item.id);
      });
      top_day.data = day_filter_id;
      params.top_day = JSON.stringify(top_day);

      var top_find = {};
      top_find.cate = "find";
      top_find.show = this.findListShow;
      top_find.title = "发现品牌";
      top_find.data = this.findList;
      params.top_find = JSON.stringify(top_find);

      var top_list = {};
      top_list.cate = "list";
      top_list.show = this.listShow;
      top_list.title = "推荐榜单";
      top_list.data = this.list;
      params.top_list = JSON.stringify(top_list);

      var top_shopList = {};
      top_shopList.cate = "shoplist";
      top_shopList.show = this.shopListShow;
      top_shopList.title = "每天上新";
      this.shopList.filter(item => {
        return shopList_filter_id.push(item.id);
      });
      top_shopList.data = shopList_filter_id;
      params.top_shoplist = JSON.stringify(top_shopList);

      params.top_del = JSON.stringify(this.top_del);
      this.$api.getConfig.setPhoneIndex(params).then(res => {
        if (res.data.code == 200 && res.data.result) {
          this.$fnc.alertSuccess({ text: "添加成功" }); //成功弹出框
          this.getIndexList();
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
        }
      });
    },
    getIndexList () {
      var params = {};
      this.$api.getConfig.getIndexList(params).then(res => {
        if (res.data.code == 200 && res.data.status == 1) {
          var data = res.data.result;
          this.title = data.top_head.title;
          if (data.top_head.data.length > 0) {
            this.headList = data.top_head.data;
          }
          this.bannerList = data.top_banner.data;
          this.bannerListShow = data.top_banner.show;

          this.menuList = data.top_menu.data;
          this.menuListShow = data.top_menu.show;

          this.brandList = data.top_brand.data;
          this.brandListShow = data.top_brand.show;

          this.day_list = data.top_day.data;
          this.day_listShow = data.top_day.show;

          this.findList = data.top_find.data;
          this.findListShow = data.top_find.show;

          this.list = data.top_list.data;
          this.listShow = data.top_list.show;

          this.shopList = data.top_shoplist.data;
          this.shopListShow = data.top_shoplist.show;

          this.adv = data.top_adv.data;
          this.advShow = data.top_adv.show;
        }
      });
    }
  },
  mounted () {
    // this.getShopMenuList();
    this.getIndexList();
  }
};
</script>

